<template>
  <div class="about">
    <myNav></myNav>
    <div class="left">
      <site-title :fontSize="2"></site-title>
      <div class="photo">
        <img src="../assets/images/photo1.jpg" alt="">
      </div>
      <div class="bottom">
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="right">
      <div class="content">
        <p class=name>乔布斯</p>
        <div class="introduction">
          史蒂夫·乔布斯（Steve Jobs，1955年2月24日—2011年10月5日 [1]  ），出生于美国加利福尼亚州旧金山，美国发明家、企业家、苹果公司联合创始人。乔布斯被认为是计算机业界与娱乐业界的标志性人物，他经历了苹果公司几十年的起落与兴衰，先后领导和推出了麦金塔计算机、iMac、iPod、iPhone、iPad等风靡全球的电子产品，深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前皮克斯动画工作室的董事长及首席执行官。
        </div>
        <span class="hr1"></span>
        <Form ref="contact" class="contact" :model="contact" :rules="contactRules">
          <p class="title">联系我</p>
          <Form-Item prop="name">
            <Input v-model="contact.name" placeholder="姓名"></Input>
          </Form-Item>
          <Form-Item prop="tel">
            <Input v-model="contact.tel" placeholder="联系电话"></Input>
          </Form-Item>
          <Form-Item prop="email">
            <Input v-model="contact.email" placeholder="邮箱"></Input>
          </Form-Item>
          <Form-Item prop="content">
            <Input v-model="contact.content" type="textarea" :rows="5" placeholder="请留言..." maxlength="250"></Input>
          </Form-Item>
          <Button @click="submit()">发送</Button>
        </Form>
      </div>
      <myFooter :paddingLeft="0"></myFooter>
    </div>
  </div>
</template>
<script>
import siteTitle from "@components/siteTitle";
import myFooter from "@components/footer";
import myNav from "@components/nav";
import { addDiscuss } from '@/api/server.js'
export default {
  name: 'about',
  components: {
    siteTitle,
    myFooter,
    myNav
  },
  data(){
    return {
      contact:{
        name:"",
        tel:"",
        email:'',
        content:""
      },
      contactRules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        tel: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '留言内容不能为空', trigger: 'blur' }],
      }
      
    }
  },
  mounted() {
    
  },
  methods: {
    submit() {
      this.$refs.contact.validate((valid) => {
        if(valid) {
          addDiscuss(this.contact).then(res => {
            if(res.data) {
              this.$refs.contact.resetFields();
              $Message.success('留言成功！');
            }else {
              $Message.error('留言失败！');
            }
          });
        }else {
          $Message.error("请输入必填项信息！");
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import url("../assets/css/global.less");
.about {
  margin-left: auto;
  margin-right: auto;
  width: 90vw;
  display: flex;
  .left {
    padding-top: 5vh;
    position: relative;
    flex: 1;
    .photo {
      margin-top: 3rem;
      img {
        width:80%;
      }
    }
    .bottom {
      position: absolute;
      bottom: 6rem;
      span {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: @color-modification;
        &:last-child {
          background: @color-title;
          margin-left: 1rem;
        }
      }
    }
  }
  .right {
    flex: 3;
    padding-top: 18vh;
    .content {
      
      padding-bottom: 1vh;
      width: 70%;
      height: calc(100vh - 18vh - 6rem);
      overflow-y: scroll;
      .name {
        font-size: 3rem;
      }
      .introduction {
        margin-top: 2rem;
        margin-bottom: 1rem;
      }
      .hr1 {
        display: inline-block;
        width: 4rem;
        border-bottom: 1px solid @color-title;
        margin-bottom: 1rem;
      }
      .contact {
        .title {
          font-size: 1.5rem;
          font-weight: 700;
          margin-bottom: 1rem;
        }
      }
    }
  }
}
</style>
